<template>
	<view class="body">
		<view class="user-set-userinfo-list">
			<view class="user-set-userinfo-list-item u-f">
				<view class="touxiang">头像</view>
				<view class="touxiang-icon u-f">
					<image :src="userpic" mode="aspectFill"  @tap.stop="changeicon" lazy-load></image>
					<view class="icon iconfont icon-bianji"></view>
				</view>
			</view>
			<view class="user-set-userinfo-list-item u-f">
				<view class="touxiang">昵称</view>
				<view class="touxiang-icon u-f">
					<!-- <image src="../../static/demo/userpic/6.jpg" mode="widthFix" lazy-load></image> -->
					<input type="text" class="username" v-model="username" />
					<view class="icon iconfont icon-bianji"></view>
				</view>
			</view>
			<view class="user-set-userinfo-list-item u-f">
				<view class="touxiang">性别</view>
				<view class="touxiang-icon u-f">
					<!-- <image src="../../static/demo/userpic/6.jpg" mode="widthFix" lazy-load></image> -->
					<view class="username">{{sex}}</view>
					<view class="icon iconfont icon-bianji"   @tap.stop="changeOne('sex')"></view>
				</view>
			</view>
			<view class="user-set-userinfo-list-item u-f">
					<view class="touxiang">生日</view>
				<picker mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="touxiang-icon u-f">
						<!-- <image src="../../static/demo/userpic/6.jpg" mode="widthFix" lazy-load></image> -->
						<view class="username">{{birthday}}</view>
						<view class="icon iconfont icon-bianji"></view>
					</view>
				</picker>
			</view>
			<view class="user-set-userinfo-list-item u-f">
				<view class="touxiang" >情感</view>
				<view class="touxiang-icon u-f">
					<!-- <image src="../../static/demo/userpic/6.jpg" mode="widthFix" lazy-load></image> -->
					<view class="username">{{qg}}</view>
					<view class="icon iconfont icon-bianji" @tap.stop="changeOne('qg')"></view>
				</view>
			</view>
			<view class="user-set-userinfo-list-item u-f">
				<view class="touxiang"  >职业</view>
				<view class="touxiang-icon u-f">
					<!-- <image src="../../static/demo/userpic/6.jpg" mode="widthFix" lazy-load></image> -->
					<view class="username">{{zy}}</view>
					<view class="icon iconfont icon-bianji" @tap.stop="changeOne('zy')"></view>
				</view>
			</view>
			<view class="user-set-userinfo-list-item u-f">
				
				<view class="touxiang">家乡</view>
				<view class="touxiang-icon u-f">
					<!-- <image src="../../static/demo/userpic/6.jpg" mode="widthFix" lazy-load></image> -->
					<view class="username">{{pickerText}}</view>
					<view class="icon iconfont icon-bianji" @click="showMulLinkageThreePicker"></view>
				</view>
			</view>
		</view>
		<mpvue-city-picker themeColor="#007AFF" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		<button type="primary" class="user-set-btn" hover-class="exit-hover" @tap="submit">完成</button>
	</view>
</template>

<script>
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		components:{
			mpvueCityPicker
		},
		
		data() {
			return {
				userpic:"../../static/demo/userpic/6.jpg",
				username:'哈哈',
				sex:'男',
				qg:'未婚',
				zy:'IT',
				mode: '',
				birthday:'1995-2-14',
				pickerText: '河南-商丘-柘城县',
				cityPickerValueDefault: [0, 0, 1],
			}
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
			onBackPress() {
			  if (this.$refs.mpvueCityPicker.showPicker) {
			  	this.$refs.mpvueCityPicker.pickerCancel();
			    return true;
				}
			  },
			  onUnload() {
			  	if (this.$refs.mpvueCityPicker.showPicker) {
			  		this.$refs.mpvueCityPicker.pickerCancel()
			  	}
			  },
		methods: {
			onCancel(e) {
				console.log(e)
			},
			onConfirm(e) {
				// this.pickerText = JSON.stringify(e)
				this.pickerText = e.label
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			changeOne(val){
				let sex = ['保密','男','女'];
				let qg = ['保密','未婚','已婚'];
				let zy = ['教师','IT','保密'];
				let arr  = [];
				switch(val){
					case 'sex':
						 arr = sex;
						uni.showActionSheet({
						    itemList: arr,
						    success: (res) => { 
						        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
								this.sex = arr[res.tapIndex]
						    },
						    fail: function (res) {
						        console.log(res.errMsg);
						    }
						});
						break;
					case 'qg':
						arr = qg;
						uni.showActionSheet({
						    itemList: arr,
						    success: (res) => { 
						        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
								this.qg = arr[res.tapIndex]
						    },
						    fail: function (res) {
						        console.log(res.errMsg);
						    }
						});
						break;
					case 'zy':
						arr = zy;
						uni.showActionSheet({
						    itemList: arr,
						    success: (res) => { 
						        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
								this.zy = arr[res.tapIndex]
						    },
						    fail: function (res) {
						        console.log(res.errMsg);
						    }
						});
						break;
				}
			},
			bindDateChange(e) {
			            this.birthday = e.target.value
			        },
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			},
			submit(){
				
			},
			changeicon(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success:  (res)=> {
				        console.log(JSON.stringify(res.tempFilePaths));
						 this.userpic = res.tempFilePaths
				    }
				});
			}
		}
	}
</script>

<style>
	@import '../../common/form.css';
	.user-set-userinfo-list {
		border-top:1upx solid #EEEEEE;
	}
	.user-set-userinfo-list-item {
		padding: 20upx;
		border-bottom: 1upx solid #EEEEEE;
		align-items:center;
		justify-content: space-between;
	}
	.user-set-userinfo-list-item>view:first-child{
		font-size: 35upx;
		font-weight: bold;
		color:#9C9C9C;
	}
	.user-set-userinfo-list-item>view:last-child>view:first-child{
		font-size: 32upx;
		color:#383838;
	}
	.user-set-userinfo-list-item>view:last-child>input {
		text-align: right;
		
	}
	.user-set-userinfo-list-item view:last-child>view:last-child{
		font-size: 32upx;
		color:#AFAFAF;
	}
	.touxiang-icon {
		align-items: center;
	}
	.touxiang-icon > view:last-child{
		margin-left: 20upx;
	}
	.touxiang-icon image {
		width:100upx;
		height: 100upx;
		border-radius: 50%;
	}
	
</style>
